<template>
  <div id="noFind">
    <Header></Header>
        <div class="container">
          <img src="/images/nofind/noFind.png" alt="">
          <a href="#/index">您查找的页面不存在,<span>{{ initTime }}</span><span>s</span>后为您跳转首页</a>
          <button onclick='location.href=("#index")'>手动跳转</button>
        </div>
    <Footer></Footer>
  </div>
</template>

<script setup>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
//1.引入
import  {useRouter} from "vue-router";
import {ref,onMounted} from "vue"
//2.定义获取路由器
const router = useRouter();
let initTime=ref(5);
onMounted(()=>{
     let leftTime= setInterval(()=>{
       initTime.value--;
       if (initTime.value<=0){
         clearInterval(leftTime);
         leftTime=null;
         // window.location.href = "/index";
         //3.跳转
         router.push("/index");
       }
    },1000)
})

</script>

<style scoped>
.container{
  height: 721px;
  display:flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.container a{
  text-decoration: none;
  color:rgb(203,203,203);
}
.container a span{
  color:rgb(60,158,185);
}
.container button{
  margin-top: 20px;
  color:rgb(97,96,101);
  width:123px;
  height: 37px;
  border: #cccccc;
  cursor: pointer;
}
.container button:hover{
  background:rgb(236,245,255);
  color:rgb(64,158,255);
}
</style>